<html lang="en">

<head th:include="templates/common :: header" />

<body>
	<div class="container" style="margin-top: 40px;">
		<div th:include="templates/common :: menu"></div>
		
		<div class="alert alert-danger" th:if="${not #strings.isEmpty(status) and status == 'app.user.exists'}">
			<a class="close">x</a>
			<p class="status" th:if="${not #strings.isEmpty(status)}" th:utext="#{${status}}">Status</p>
		</div>
		
		<div class="panel panel-primary">
			<div class="panel-heading" th:text="#{'students.'+ ${type} + '.label'}"></div>
	  		<div class="panel-body">
				<form id="studentsEditForm" action="#" th:object="${userDTO}" th:action="@{'/users/' + ${userType} + '/' + ${type}}" method="post" class="form-horizontal">
							
						<div class="form-group">
							<label class="col-lg-2 control-label" th:text="#{profile.username}">Login</label>
							<div class="col-lg-3">
								<input id="hiddenID" type="hidden" th:field="*{id}" /> 
								<input id="studentsUserName" type="text" class="form-control" th:field="*{userName}" th:placeholder="#{profile.username}"/>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-lg-2 control-label" th:text="#{profile.firstname}">FirstName</label>
							<div class="col-lg-3">
								<input id="studentsFirstName" type="text" class="form-control" th:field="*{firstName}" th:placeholder="#{profile.firstname}"/>
							</div>
						</div>
							
						<div class="form-group">
							<label class="col-lg-2 control-label" th:text="#{profile.lastname}">LastName</label>
							<div class="col-lg-3">
								<input id="studentsLastName" type="text" class="form-control" th:field="*{lastName}" th:placeholder="#{profile.lastname}"/>
							</div>
						</div>	
						
						<div class="form-group">
							<label class="col-lg-2 control-label" th:text="#{profile.album.number}"/>
							<div class="col-lg-3">
								<input  id="studentsAlbumNumber" type="text" class="form-control" th:field="*{albumNumber}" required="required" th:placeholder="#{profile.album.number}"/>
							</div>
						</div>	
						
						<div class="form-group">
							<label class="col-lg-2 control-label" th:text="#{profile.email}">#{profile.email}</label>
							<div class="col-lg-3">
								<input  id="studentsEmail" type="text" class="form-control" th:field="*{email}" th:placeholder="#{profile.email}"/>
							</div>
						</div>	
						
						<div class="form-group"  th:classappend="${#fields.hasErrors('password')} ? 'error'">
							<label class="col-lg-2 control-label" th:text="#{profile.password}">#{profile.password}</label>
							<div class="col-lg-3">
								<input  id="studentsPassword" type="password" class="form-control" th:field="*{password}" th:placeholder="#{profile.password}" />
							</div>
						</div>	
						
						<div class="form-group">
							<label class="col-lg-2 control-label" th:text="#{groups.label}">#{profile.password}</label>
							<div class="col-lg-3">
								<select th:field="*{groups}" id="studentsGroups" class="chzn-select btn-block">
									<option th:each="group : ${allGroups}" th:value="${group.id}" th:text="${group.getGroupFullName()}">Access Type 1</option>
								</select>
							</div>
						</div>	
						
						 <div class="form-group">
						    <div class="col-lg-offset-2 col-lg-10">
						      <div class="checkbox">
						        <label>
						          	<input  id="studentsStatus" type="checkbox" th:field="*{status}" th:text="#{account.status.label}"/>	
						        </label>
						      </div>
						    </div>
						  </div>						
						
						<div class="form-group">
							<div class="col-lg-offset-2 col-lg-2">
								<button id="studentsSubmitForm" type="submit" class="btn btn-primary" th:text="${type} == 'create' ?  #{students.create}: #{app.update.data}">Add</button>
							</div>
						</div>						
				</form>
			</div>
		</div>
	</div>
	
	<script type="text/javascript"> 
		$(document).ready(function() {
	    	$('.chzn-select').select2({});	    
	 	});
	</script>	
	
</body>
</html>